<template>
    <quick-layout
            ref="Instance"
            :is-operate-btn="true"
            :is-operate="true"
            :data-list-url="dataListUrl"
            :delete-url="deleteUrl"
            :export-url="exportUrl"
            :import-url="importUrl"
            table-title="${tableComment}"
            size="small"
            @edit="handleEdit"
            @created="handleEdit(null)"
    >
        <template v-slot:query="{query,reset}">
            <query-item label="模糊查询">
                <el-input v-model="query.keyword" style="width: 270px" placeholder="请输入关键词..."/>
            </query-item>
            <#list formList as field>
                <#if field.formType == 'text'>
                    <query-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-input v-model="query.${field.attrName}" placeholder="${field.fieldComment!}"></el-input>
                    </query-item>
                <#elseif field.formType == 'textarea'>
                    <query-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-input type="textarea" v-model="query.${field.attrName}"></el-input>
                    </query-item>
                <#elseif field.formType == 'editor'>
                    <query-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-input type="textarea" v-model="query.${field.attrName}"></el-input>
                    </query-item>
                <#elseif field.formType == 'select'>
                    <#if field.formDict??>
                        <query-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <fast-select v-model="query.${field.attrName}" dict-type="${field.formDict}" placeholder="${field.fieldComment!}"></fast-select>
                        </query-item>
                    <#else>
                        <query-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-select v-model="query.${field.attrName}" placeholder="请选择">
                                <el-option label="请选择" value="0"></el-option>
                            </el-select>
                        </query-item>
                    </#if>
                <#elseif field.formType == 'radio'>
                    <#if field.formDict??>
                        <query-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <fast-radio-group v-model="query.${field.attrName}" dict-type="${field.formDict}"></fast-radio-group>
                        </query-item>
                    <#else>
                        <query-item label="${field.fieldComment!}" prop="${field.attrName}">
                            <el-radio-group v-model="query.${field.attrName}">
                                <el-radio :label="0">启用</el-radio>
                                <el-radio :label="1">禁用</el-radio>
                            </el-radio-group>
                        </query-item>
                    </#if>
                <#elseif field.formType == 'checkbox'>
                    <query-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-checkbox-group v-model="query.${field.attrName}">
                            <el-checkbox label="启用" name="type"></el-checkbox>
                            <el-checkbox label="禁用" name="type"></el-checkbox>
                        </el-checkbox-group>
                    </query-item>
                <#elseif field.formType == 'date'>
                    <query-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-date-picker type="date" placeholder="${field.fieldComment!}" v-model="query.${field.attrName}"></el-date-picker>
                    </query-item>
                <#elseif field.formType == 'datetime'>
                    <query-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-date-picker type="datetime" placeholder="${field.fieldComment!}" v-model="query.${field.attrName}"></el-date-picker>
                    </query-item>
                <#else>
                    <query-item label="${field.fieldComment!}" prop="${field.attrName}">
                        <el-input v-model="query.${field.attrName}" placeholder="${field.fieldComment!}"></el-input>
                    </query-item>
                </#if>
            </#list>
        </template>
        <template>
            <el-table-column type="selection" header-align="center" align="center" width="50"/>
            <#list gridList as field>
                <el-table-column prop="${field.attrName}" label="${field.fieldComment!}" header-align="center" align="center"></el-table-column>
            </#list>
        </template>
        <template #component>
            <add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
        </template>
    </quick-layout>
</template>

<script>
    import AddOrUpdate from './add-or-update.vue'
    import QuickLayout from '@/components/EmpsLayout/index.vue'
    import QueryItem from '@/components/QueryItem/index.vue'

    export default {
        name: '${ClassName}',
        components: {QuickLayout,QueryItem, AddOrUpdate},
        data() {
            return {
                dataListUrl: '/${moduleName}/${functionName}/page',
                deleteUrl: '/${moduleName}/${functionName}',
                exportUrl: '/${moduleName}/${functionName}/export',
                importUrl: '/${moduleName}/${functionName}/import',
                businessEnum: []
            }
        },
        created() {
            this.getBusinessEnum()
        },
        methods: {
            getInstance() {
                return this.$ref.Instance;
            },
            handleEdit(id) {
                this.$refs.addOrUpdateRef.init(id)
            },
            getDataList() {
                this.getInstance().query()
            }
        }
    }
</script>
